'use client'

import {Button, Card, Col, Form, Input, message, Row} from 'antd'

type SettingItem = {
  id: string
  key: string
  value: string
  description: string
  group: string
  type: 'text' | 'number' | 'boolean' | 'json'
  createTime: string
  updateTime: string
}

export default function SettingsPage() {
  const [form] = Form.useForm()

  const groups = [
    {
      title: '基本设置',
      settings: [
        {
          id: '1',
          key: 'site.name',
          value: 'OmniStock',
          description: '站点名称',
          group: 'basic',
          type: 'text',
          createTime: '2024-03-01 10:00:00',
          updateTime: '2024-03-01 10:00:00',
        },
        {
          id: '2',
          key: 'site.description',
          value: '进销存管理系统',
          description: '站点描述',
          group: 'basic',
          type: 'text',
          createTime: '2024-03-01 10:00:00',
          updateTime: '2024-03-01 10:00:00',
        },
      ],
    },
    {
      title: '系统配置',
      settings: [
        {
          id: '3',
          key: 'system.pageSize',
          value: '20',
          description: '默认分页大小',
          group: 'system',
          type: 'number',
          createTime: '2024-03-01 10:00:00',
          updateTime: '2024-03-01 10:00:00',
        },
        {
          id: '4',
          key: 'system.theme',
          value: 'light',
          description: '系统主题',
          group: 'system',
          type: 'text',
          createTime: '2024-03-01 10:00:00',
          updateTime: '2024-03-01 10:00:00',
        },
      ],
    },
    {
      title: '安全配置',
      settings: [
        {
          id: '5',
          key: 'security.passwordMinLength',
          value: '8',
          description: '密码最小长度',
          group: 'security',
          type: 'number',
          createTime: '2024-03-01 10:00:00',
          updateTime: '2024-03-01 10:00:00',
        },
        {
          id: '6',
          key: 'security.loginAttempts',
          value: '5',
          description: '最大登录尝试次数',
          group: 'security',
          type: 'number',
          createTime: '2024-03-01 10:00:00',
          updateTime: '2024-03-01 10:00:00',
        },
      ],
    },
  ]

  const handleSave = () => {
    form.validateFields().then((values) => {
      console.log(values)
      message.success('保存成功')
    })
  }

  return (
    <div style={{ padding: '24px' }}>
      <Form form={form} layout="vertical" initialValues={{}}>
        <Row gutter={[24, 24]}>
          {groups.map((group) => (
            <Col span={24} key={group.title}>
              <Card title={group.title} bordered={false}>
                <Row gutter={[16, 16]}>
                  {group.settings.map((setting) => (
                    <Col span={12} key={setting.id}>
                      <Form.Item
                        label={
                          <div>
                            <div>{setting.description}</div>
                            <div style={{ fontSize: '12px', color: '#999' }}>{setting.key}</div>
                          </div>
                        }
                        name={setting.key}
                        initialValue={setting.value}
                      >
                        <Input />
                      </Form.Item>
                    </Col>
                  ))}
                </Row>
              </Card>
            </Col>
          ))}
        </Row>
        <div style={{ marginTop: '24px', textAlign: 'center' }}>
          <Button type="primary" onClick={handleSave}>
            保存设置
          </Button>
        </div>
      </Form>
    </div>
  )
} 